import {topics} from "../services/example"



export default {
  namespace: "test",  //命名空间的名称


  //定义数据状态的位置
  state: {  
    name: "zhang",  // 定义了一个简单的数据
    list: [] 
  }, 


  //定义同步方法的地方
  reducers: {  

    //用于直接修改 state 数据的方法, 的一个简单案例
    setName(state, payload) {  //参数为上面的 state 以及接收的组件参数
      console.log("run");  //证明调用了
      console.log(state.name);  //model中的数据
      console.log(payload.data.name);  //传过来的数据
      let _state = JSON.parse(JSON.stringify(state))  //深复制解决不能及时渲染的问题
      _state.name = payload.data.name  // 通过接收的参数, 修改 model 中的数据
      return _state;  //最后导出, 不加会报错的
    },

    // 就是说定义好之后, 返回的这个对象就是, 该命名空间的新对象
    setList(state, payload) {
      let _state = JSON.parse(JSON.stringify(state))
      _state.list = payload.data.list
      return _state
    }

  },


  //定义异步方法的位置
  //作用: 请求数据 + 调用同步里面的方法
  effects: { 
    
    *setNameAsync({payload}, {put, call}) {
      console.log(999999);  //可以跑起来

      yield put({   // 1 调用同步里面的方法
        type: 'setName',
        data: {name: "超人强"}
      })
    },

    // 调接口, 获取数据
    *testCnode({payload}, {put, call}) { 
      let rel = yield call(topics)  //接口, 还可以传请求参数, 这个参数一般是由 payload 传进来的
      if(rel.data) {
        yield put({
          type: "setList",
          data: {list: rel.data}
        })
      }
      console.log(rel)
    }
  },


  // 理解为一个订阅, 类似 Vue 中的 getter 全局计算属性, 组件创建就会执行, 
  // 作用: 可以用来监听
  subscriptions: {
    hehe({dispatch, history}) {  //dispatch 可以调用组件里面的一些方法; history
      console.log("run66");  //会直接运行在组件的最前面

      // 需求如果是首页就不触发, 如果是user页面就触发这个函数
      // 就是路由发生改变的时候, 去触发里面的一个方法
      history.listen(({pathname}) => {
        if (pathname === '/a1') {
          console.log(77777);  //创建 a1 页面的时候会执行, 生成首页的组件的时候不会执行
          //可用来在, a1 组件页面自动修改一些数据
        }
      })
    }
  }

}

